<template>
  <div class="permission">
    <el-card>
      <div style="text-align: right">
        <!--
   增：
     1：创建新增弹框组件
     2：点击新增按钮打开弹框
           ref
           .sync
           v-model
     3：完成表单处理
         布局
         表单验证
     4：定义新增api
     5:导入api
     6:在表单验证通过后调用api
     7:调用成功
       a:提示
       b:关闭弹框
       c:清除表单数据与验证
       d:刷新父级列表数据
   删除
     1：点击删除按钮弹出一个确定框
     2：定义删除api
     3:导入
     4：在点击确定框的确定，调用删除api
     5:调用成功
        a:提示
        b:刷新列表数据
           如果有分页
             判断是否是>1页且该页只有一条数据  就当前页码--
             刷新列表数据

   编辑
     1：打开新增弹框
     2：在新增弹框组件内定义一个mode  add:新增  edit:编辑
     3：新增与编辑打开 弹框时修改mode成相应的值
     4：调整标题（分场景调整）
     5：数据回显（注意要深拷贝）
     6：看是否有表单验证需要调整
     7：定义编辑api
     8:导入api
     9:分场景调用api
     10:调用完成
        a:提示
        b:关闭弹框
        c:清空表单数据与验证
        d:刷新父级列表数据

 -->

        <el-button type="primary" @click="addEvent('0', 1)">添加菜单</el-button>
      </div>
      <!-- el-table渲染树形数据
      1：数据要有children
      2:  el-table  row-key="数据的唯一标识的字段名"

       -->
      <el-table :data="list" row-key="id">
        <el-table-column prop="name" label="菜单名称" />
        <el-table-column prop="code" label="权限标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="row.type === 1"
              type="text"
              @click="addEvent(row.id, 1)"
            >添加页面权限点</el-button>
            <el-button
              v-if="row.type === 1"
              type="text"
              @click="addEvent(row.id, 2)"
            >添加按钮权限点</el-button>
            <el-button type="text" @click="edit(row)">修改权限点</el-button>
            <el-button type="text" @click="del(row.id)">删除权限点</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹框组件 -->
    <!-- <PermissionAdd :value="show" @input="show = $event" /> -->
    <PermissionAdd ref="add" v-model="show" @getData="getData" />
  </div>
</template>
<script>
import { sysPermission, sysPermissionDelete } from '@/api/permission'
import { changeData } from '@/utils/index'
import PermissionAdd from './components/PermissionAdd.vue'
export default {
  components: {
    PermissionAdd
  },
  data() {
    return {
      show: false,
      list: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysPermission()
      this.list = changeData(res.data, '0')
      console.log(res)
    },
    // 树形数据渲染
    // changeData(arr, str = '0') {
    //   return arr.filter((item) => {
    //     if (item.pid === str) {
    //       item.children = this.changeData(arr, item.id)
    //       return true
    //     }
    //   })
    // }
    // 新增点击
    addEvent(pid, type) {
      this.show = true
      this.$refs.add.mode = 'add'
      this.$refs.add.form.pid = pid
      this.$refs.add.form.type = type
    },
    // 删除点击
    del(id) {
      this.$confirm('您确定删除该项吗？', '提示')
        .then(async() => {
          await sysPermissionDelete(id)
          this.$message.success('删除成功')
          this.getData()
        })
        .catch(() => {})
    },
    // 修改
    edit(row) {
      this.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    }
  }
}
</script>
<style lang="scss" scoped>
.permission {
  padding: 20px;
}
</style>
